<template>
    <div class="app-container" id='Ad'>
        <div class="filter-container" style="float: right;">
            <el-input v-model="listQuery.name" clearable class="filter-item" style="width: 200px;" placeholder="请输入广告标题"></el-input>
            <el-input v-model="listQuery.content" clearable class="filter-item" style="width: 200px;" placeholder="请输入广告内容"></el-input>
            <el-button type="primary" class="filter-item" icon="el-icon-search" @click="handleFilter">查询</el-button>
            <el-button type="primary" class="filter-item" icon="el-icon-edit" @click="handleCreate">添加</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%" border fit highlight-current-row>
            <el-table-column prop="id" align="center" label="广告ID" sortable width="120"></el-table-column>
            <el-table-column prop="name" align="center" label="广告标题" width="180"></el-table-column>
            <el-table-column prop="content" align="center" label="广告内容" width="180"></el-table-column>
            <el-table-column prop="picUrl" align="center" label="广告图片">
                <template slot-scope="scope">
                    <img :src="scope.row.url" width="80">
                </template>
            </el-table-column>
            <el-table-column align="center" label="广告位置" prop="position">
                <template slot-scope="scope">
                    <span>{{scope.row.position == '1'?'首页':'其他'}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="link" align="center" label="活动链接"></el-table-column>
            <el-table-column prop="link" align="center" label="是否启用">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.enabled ? 'success':'error'">{{scope.row.enabled?'启用':'不启用'}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                    <el-button @click="handleUpdate(scope.row)" type="primary" size="small">编辑</el-button>
                    <el-button @click="handleDelete(scope.row)" type="danger" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
        <el-dialog :title="dialogStatus" :visible.sync="dialogFromVisible">
            <el-form ref="dataForm" :rules="rules" :model="dataForm"  label-width="100px" size="mini" style="width: 400px;margin-left: 20px;">
                <el-form-item label="广告标题" prop="name">
                    <el-input v-model="dataForm.name"></el-input>
                </el-form-item>
                <el-form-item label="广告内容" prop="content">
                    <el-input v-model="dataForm.content"></el-input>
                </el-form-item>
                <el-form-item label="广告图片" prop="url">
                    <el-upload class="avatar-uploader" :action="uploadPath" :headers="headers"
                        :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="dataForm.url" :src="dataForm.url" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="广告位置" prop="position">
                    <el-select v-model="dataForm.position" placeholder="请选择">
                        <el-option :value="1" label="首页"/>
                        <el-option :value="2" label="其他"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="活动连接" prop="link">
                    <el-input v-model="dataForm.link"></el-input>
                </el-form-item>
                <el-form-item label="是否启用" prop="enabled">
                    <el-select v-model="dataForm.enabled" placeholder="请选择">
                        <el-option :value="true" label="启用"/>
                        <el-option :value="false" label="不启用"/>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFromVisible = false">取消</el-button>
                <el-button v-if="dialogStatus === '新增'" type="primary" @click="createData">确定</el-button>
                <el-button v-else type="primary" @click="updateData">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import {listAd,createAd,updateAd,deleteAd,uploadPath} from '@/api/activity/ad'
import {getToken} from '@/utils/auth'
export default {
    name: 'Ad',
    components: {
        Pagination
    },
    computed: {
        headers(){
            return {'Shopping-Admin-Token':getToken()}
        }
    },
    data() {
        return {
            uploadPath,
            //查询数据
            listQuery: {
                page: 1,
                limit: 10,
                name: '',
                content: '',
            },
            //总条数
            total: 0,
            //表格数据
            tableData: [],
            //添加或修改模态框状态
            dialogFromVisible: false,
            //模型框类型
            dialogStatus:'新增',
            //新增表单数据
            dataForm: {
                id: '',
                name: '',
                content: '',
                url: '',
                position: '',
                link: '',
                enabled: ''
            },
            //校验规则
            rules: {
                name: [{required: true , message: '广告标题不能为空',trigger:'blur'}],
                content: [{required: true , message: '广告内容不能为空',trigger:'blur'}],
                url: [{required: true , message: '广告图片不能为空',trigger:'blur'}],
            }
        }
    },
    created() {
        // 数据初始化
        this.getList();
    },
    methods: {
        //查询列表
        handleFilter() {
            this.listQuery.page = 1;
            this.getList();
        },
        //获取列表数据接口
        getList() {
            listAd(this.listQuery).then(res => {
                console.log(res);
                this.tableData = [];
                this.tableData = res.data.data.list;
                this.total = res.data.data.total;
            })
        },
        //重置表单数据
        resetForm(){
            this.dataForm = {
                id: '',
                name: '',
                content: '',
                url: '',
                position: '',
                link: '',
                enabled: ''
            }
        },
        //打开新增模态框
        handleCreate() {
            this.resetForm();
            this.dialogStatus = '新增';
            this.dialogFromVisible = true;
        },
        //确定新增
        createData() {
            this.$refs['dataForm'].validate(valid => {
                if(valid){
                    createAd(this.dataForm).then(res => {
                        this.dialogFromVisible = false;
                        this.getList();
                        this.$notify.success({
                            title: '成功',
                            message: '新增成功'
                        });
                    })
                }
            })
        },
        //打开修改模态框
        handleUpdate(row) {
            this.dataForm = Object.assign({}, row);
            this.dialogStatus = '修改';
            this.dialogFromVisible = true;
        },
        //确定修改
        updateData(){
            this.$refs['dataForm'].validate(valid => {
                if(valid){
                    updateAd(this.dataForm).then(()=>{
                        this.dialogFromVisible = false;
                        this.getList();
                        this.$notify.success({
                            title: '成功',
                            message: '修改成功'
                        })
                    })
                }
            })
        },
        //删除
        handleDelete(row) {
            this.$confirm('此操作将删除该品牌商，是否继续？','提示',{
                confirmButtonText: '确定',
                concelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteAd(row).then(res => {
                    this.getList();
                    this.$notify.success({
                        title: '成功',
                        message: '删除成功'
                    })
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        //图片上传成功后执行的方法
        handleAvatarSuccess(res, file) {
            this.dataForm.url = res.data.url
        },
        //图片上传成功前执行的方法
        beforeAvatarUpload(file) {
            // const isJPG = file.type === 'image/jpeg'; 
            // const isLt2M = file.size / 1024 / 1024 < 2;
            // if (!isJPG) {
            //     this.$message.error('上传头像图片只能是 JPG 格式!');
            // }
            // if (!isLt2M) {
            //     this.$message.error('上传头像图片大小不能超过 2MB!');
            // }
            // return isJPG && isLt2M;
        }
    }
}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style scoped>
</style>